.banner {
    height: 340px;
    position: relative;
    overflow: hidden;
}
.banner .pic {
    width: 2560px;
    height: 340px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1280px;
    margin-top: -170px;
    z-index: -1;
}


.banner .main .nav {
    width: 210px;
    height: 340px;
    background: rgba(50, 50, 50,0.9);
    
}
.banner .main .nav li{
    width: 210px;
    padding: 11px 16px;
    box-sizing: border-box;
    display:flex ;
    justify-content: space-between;
    align-items: center;
}
.banner .main .nav li:hover{
    background: rgba(255, 255, 255,0.1);
}
.banner .main .nav li p{
    width: 94px;
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner .main .nav li img{
    width: 16px;
    height: 16px;
}
.banner .main .nav li span{
    color: #c2bfc1;
    font-size: 12px;
}


/*  main_nav*/
main .main_nav{
    height: 170px;
    display: flex;
    justify-content: space-around;
}

main .main_nav li{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 47px 0;
    box-sizing: border-box;
}
main .main_nav li img{
    width: 40px;
    height: 40px;
}
main .main_nav li:hover{
    transform: translateY(-10px);
    color: red;
}

/* main_topCont */
.main_topCont {
    padding: 10px 0;
    height: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
}


.main_topCont article:nth-of-type(1){
    padding: 0 40px;
    box-sizing: border-box;
    width: 600px;
    height: 300px;
    background: url(../images/bg-a.png) no-repeat center center;
}
.main_topCont article:nth-of-type(1) h3 {
    height: 104px;
    font: 24px/104px '宋体';
    color: #fff;
}
.main_topCont article:nth-of-type(1) ul{
    display: flex;
    justify-content: space-between;
}
.main_topCont article:nth-of-type(1) li {
    width: 168px;
    height: 66px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}
.main_topCont article:nth-of-type(1) li p{
    font-size: 18px;
}
.main_topCont article:nth-of-type(1) li img{
    width: 11px;
    height: 6px;
}
.main_topCont article .btn{
    display: block;
    width: 160px;
    height: 50px;
    border-radius: 30px;
    background: #fff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px auto 0;
}
.main_topCont article .btn p {
    color: #f93f4f !important;
    margin-right: 10px;
}

.main_topCont article:nth-of-type(2) {
    width: 240px;
    height: 300px;
    background: url(../images/bg-b.png) no-repeat center center;
    position: relative;
}

.main_topCont article:nth-of-type(2) div{
    width: 240px;
    height: 300px;
    opacity: 0.2;
    background: #fff;
    position: absolute;
    left: 0;top: 0;
    right: 0;bottom: 0;
    margin: auto;
    z-index: 1;
    display: none;
}
.main_topCont article:nth-of-type(2):hover div{
    display: block;
}
.main_topCont article:nth-of-type(2) h3 {
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 46px;
    padding-top: 56px;
}

.main_topCont article:nth-of-type(2) p{
    font-size: 18px;
    line-height: 30px;
    height: 46px;
    text-align: center;
    color: #fff;
}
.main_topCont article:nth-of-type(2) p span {
    color: #fff600;
}
.main_topCont article:nth-of-type(2) .btn{
    font-size: 16px;
    color: #fa5243;
    text-align: center;
    line-height: 48px;
    margin-top: 44px;
}
.main_topCont aside{
    width: 330px;
    height: 300px;
    padding: 0 40px;
    box-sizing: border-box;
    box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}
.main_topCont aside h3{
    height: 100px;
    font-size: 20px;
    line-height: 100px;
    color: #000;
}
.main_topCont aside ul {
    display: flex;
    justify-items: self-start;
    flex-wrap: wrap;
}
.main_topCont aside ul li {
    flex: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #333333;
    font-size: 12px;
    height: 70px;
    margin-bottom: 16px;
}
.main_topCont aside ul li:hover{
    transform: translateY(-8px);
    
} 
.main_topCont aside ul li:hover p{
    border-bottom: 1px solid #333;
}
.main_topCont aside ul li img{
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

/* main_travel */
.main_travel{
    height: 878px;
    background-image: linear-gradient(to bottom , #f8f8f8 30%, #fff);
    margin-top: 10px;
}
h4 {
    height: 140px;
    font-size: 30px !important;
    text-align: center;
    line-height: 140px;
    color: #000;
}
/* main_travel .travel_top */
.travel_top {
    height: fit-content;
    display: flex;
    justify-content: space-between;
}
.travel_top dl{
    width: 386px;
    height: 350px;
    position: relative;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.04);
}
.travel_top dl:hover div {
    width: 386px;
    height: 350px;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    z-index: 1;
    background: rgba(255, 255, 255, 0.3);
}
.travel_top dl:hover div span {
    display: block;
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 50%;
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -25px ;
}
.travel_top dl div span img{
    margin: 17px auto 0;
}
.travel_top dl dd p{
    font-size: 16px;
    text-align: center;
    padding: 26px 0 20px;
    box-sizing: border-box;
    font-weight: bold;
}
.travel_top dl dd .money{
    display: block;
    font-size: 26px;
    color: #f83244;
    padding-left: 26px;
}
.travel_top dl dd span .money i{
    font-size: 16px;
    color: #f83244;
    
}
.travel_top dl dd span:nth-of-type(2){
    font-size: 12px;
    padding-right: 26px;
    line-height: 26px;
}

/* main_travel .travel_bot */
.main_travel .travel_bot {
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
}
.main_travel .travel_bot dl{
    width: 286px;
    position: relative;
}
.main_travel .travel_bot dl dt{
    position: relative;
    height: fit-content;
    width: fit-content;
}
.main_travel .travel_bot dl dt img{
    width: 286px;
    height: 200px;
}
.main_travel .travel_bot dl dt:hover div{
    width: 286px;
    height: 200px;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    background: rgba(255, 255, 255, 0.3);
}
.main_travel .travel_bot dl dd {
    width: 256px;
    height: 110px;
    background:#fff;
    position: absolute;
    left: 50%;
    margin-left: -128px;
    bottom: -55px;
    padding: 10px 26px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.04);
    transition: 0.2s all ease;
}
.main_travel .travel_bot dl dd:hover{
    transform: translateY(-10px);
}
.main_travel .travel_bot dl dd p:nth-of-type(1){
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.main_travel .travel_bot dl dd p:nth-of-type(2){
    
    height: 15px;
    font-size: 12px;
    width: fit-content;
    box-sizing: border-box;
}
.main_travel .travel_bot dl dd p:nth-of-type(2):hover{
    border-bottom: 1px solid #000;
}
.main_travel .travel_bot dl dd span{
    display: block;
    font-size: 14px;
    color: #f83244;
    padding-top: 22px;
    font-weight: bold;
}
.main_travel .travel_bot dl dd span i{
    font-size: 12px;
    font-weight: normal;
}

/* main_city */

.main_city  .city_cont{
    display: flex;
    justify-content: space-between;
}
.main_city  .city_cont aside{
    width: 240px;
    height: 360px;
    position: relative;
    overflow: hidden;
}
.main_city  .city_cont aside .pull{
    width: 240px;
    height: 360px;
    position: absolute;
    left: 50%;
    margin-left: -120px;
    bottom: -310px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: 0.5s;
}
.main_city  .city_cont article .pull{
    width: 240px;
    height: 180px;
    position: absolute;
    left: 50%;
    margin-left: -120px;
    bottom: -130px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: 0.25s;
}
.main_city  .city_cont aside:hover  .pull{
    transform: translateY(-310px);
}
.main_city  .city_cont article :hover  .pull{
    transform: translateY(-130px);
}
.main_city  .city_cont  .pull p{
    color: #fff;
    margin-left: 20px;
    font-size: 24px;
    line-height: 50px;
}
.main_city  .city_cont  .pull p:last-of-type{
    font-size: 16px;
}
.main_city  .city_cont  .pull p:first-of-type{
    border-bottom: 2px solid #fff;
    width: fit-content;
}
.main_city  .city_cont aside img{
    width: 240px;
    height: 360px;
}

.main_city  .city_cont article {
    height: 360px;
    flex: 1;
    margin: 0 2px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-items: center;
}

.main_city  .city_cont article div{
    position: relative;
    overflow: hidden;
}

.main_city  .city_cont article div img{
    width: 238px;
    height: 178px;
}

/* main_city .more*/

 .more{
    width: 160px;
    height: 48px;
    background: #f83244;
    margin: 60px 0 42px;
    border-radius: 24px;
    box-shadow: 0px 16px 24px 0px rgba(248, 50, 68, 0.2);
    margin-left: calc(50% - 80px);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 16px;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
}
.more:hover{
    opacity: 0.9;
}
.more img{
    width: 12px;
    height: 12px;
}


/* main_case */
.main_case article{
    position: relative;
    margin:  0 10px;
    z-index: 1;
}

.main_case article dl{
    width: 642px;
    height: 540px;
    position: absolute;
    left: 50%;
    margin-left: -321px;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.04);
}
.main_case article dl dt img{
    width: 642px;
    height: 400px;
}
.main_case article dl dd{
    margin-top: 34px;
}
.main_case article dl dd p{
    line-height: 35px;
    font-size: 24px;
    font-weight: bold;
    padding: 0 25px;
}
.main_case article dl dd p:last-of-type{
    font-size: 14px;
    color: #c2bfc1;
}
.main_case article dl:hover dt{
    opacity: 0.9;
}

 .red {
    display: block;
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 50%;
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -25px ;
}

 .red img{
    margin: 17px auto 0;
}

/* main_case aside*/
.main_case .aside{
    height: 540px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
}
.main_case .aside div{
    width: 384px;height: 300px;
    position: relative;
}
.main_case .aside img{
    width: 384px;height: 300px;
}
.main_case .aside span{
    display: block;
    width: 384px;height: 300px;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    background: #000;
    opacity: 0.4;
}

/* main_case redDot*/
.main_case .redDot {
    display: flex;
    margin-top: 50px;
    justify-content: center;
}
.main_case .redDot span{
    display: block;
    width: 6px;height: 6px;
    background-color: #cccccc;
    border-radius: 50%;
    margin: 0 8px;
}
.main_case .redDot span:first-child{
    background: red;
}
.main_case .tips{
    text-align: center;
    font-size: 12px;
    color: #aaaaaa;
}
/* main_process */

.main_process {
    margin-top: 82px;
    overflow: hidden;
   background: #fff;
}
.main_process .bg{
    width: 100%;
    height: 312px;
    background: url(../images/icon-bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 77px;
}
.main_process .process_nav{
    height: 250px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    bottom: -77px;
    left: 50%;
    margin-left: -675px;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    
        
}
.main_process .process_nav li{
    height: 250px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.main_process .process_nav li div span{
        display: block;
        margin: auto;;
        width: 72px;
        height: 72px;
        background: url(../images/CSS\ Satyr.png) no-repeat center center;
        background-position: 0px 0px;
        position: relative;
        
}
.main_process .process_nav li dd {
    transform: translateY(-50px);
}
.main_process .process_nav li:hover dd{
    transform: translateY(0px)
}
.main_process .process_nav li dd p:last-of-type{
    padding-top: 5px;
    font-size: 12px;
    display: none;
}
.main_process .process_nav li:hover dd p:last-of-type{
    display: block;
}

.main_process .process_nav li:hover div{
    background-color:#fa5243;
}
.main_process .process_nav li div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    
    z-index: 3;
    display: flex;
}
.main_process .process_nav li .pic1{
    background-position: 0px -72px;
}
.main_process .process_nav li .pic2{
    background-position: 0px -144px;
}

.main_process .process_nav li .pic3{
    background-position: 0px -216px;
}

.main_process .process_nav li .pic4{
    background-position: 0px -288px;
}

.main_process .process_nav li .pic5{
    background-position: 0px -360px;
}

.main_process .process_nav li .pic6{
    background-position: 0px -432px;
}

.main_process .process_nav li .pic7{
    background-position: 0px -500px;
}


.main_process .process_nav li:hover .pic{
    background-position: -77px 0px;
}
.main_process .process_nav li:hover .pic1{
    background-position: -77px -72px;
}
.main_process .process_nav li:hover .pic2{
    background-position: -77px -144px;
}

.main_process .process_nav li:hover .pic3{
    background-position: -77px -216px;
}

.main_process .process_nav li:hover .pic4{
    background-position: -77px -288px;
}

.main_process .process_nav li:hover .pic5{
    background-position: -77px -360px;
}

.main_process .process_nav li:hover .pic6{
    background-position: -77px -432px;
}

.main_process .process_nav li:hover .pic7{
    background-position: -77px -500px;
}

/* .main_process hot_city*/
.main_process .hot_city{
    display: flex;
    justify-content: space-between;
}
.main_process .hot_city dl{
    height: 211px;
    background: #fff;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.04);
    position: relative;
}
.main_process .hot_city dl dd{
    margin-top: 20px;
    font-size: 24px;
    margin-left: 10px;
}
.main_process .hot_city dl:hover{
    opacity: 0.9;
}
.main_process .hot_city .red{
    display: none;
}
.main_process .hot_city dl:hover .red{
    display: block;
}
.main_process .otherCities{
    height: 135px;
    display: flex;
    padding-top: 40px;
}
.main_process .otherCities p:nth-child(1){
    height: fit-content;
    padding-right: 20px;
    box-sizing: border-box;
    border-right: 1px solid #000;
    display: flex;
}
.main_process .otherCities p:nth-child(1) img{
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
.main_process .otherCities p:nth-child(2){
    word-spacing: 22px;
    margin-left: 22px;
    
}

/* main_supplies */
.main_supplies{
    background-image: linear-gradient(to bottom , #f8f8f8 30%, #fff);
}
.main_supplies{
    text-align: center;
}
.main_supplies ul{
    margin-top: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.main_supplies ul li{
    width: 288px;
    height: 340px;
    position: relative;
}
.main_supplies ul li div{
    width: 256px;
    height: 112px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -131px;
    background: #fff;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: start;
    box-shadow: 0 5px 20px 4px rgba(0, 0, 0, 0.06);
    transition: 0.2s all ease;
}
.main_supplies ul li div:hover{
    transform: translateY(-10px);
}
.main_supplies ul li img{
    width: 288px;
    height: 288px;
}
.main_supplies ul li img:hover{
    opacity: 0.9;
}
.main_supplies ul li div p:first-of-type{
    font-size: 24px;font-weight: bold;
}
.main_supplies ul li div p:first-of-type span{
    display: inline-block;
    border-bottom: 2px solid #f83244;
    padding-bottom: 10px;
    margin-bottom: 6px;
}


/* pretty_pic */
.pretty_pic {
    height: 1374px;
    background: url(../images/o_1d1fnk660104ejpg6p41k0210jbe.png) no-repeat center center;
    background-size: cover;
}
.pretty_pic h4 {
    color: #fff;
}

.pretty_main{
    width: 1322px;
    margin: 0 auto;
    padding: 0 12px;
    
}
/* <!--  第一层 --> */
.pretty_main .pretty_top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.pretty_main .pretty_top .ptyPic1{
    width: 662px;
    height: 512px;
}
.pretty_main .pretty_top aside{
    width: 660px;
    height: 390px;
    background: #000;
}
.pretty_main .pretty_top aside .wrap{
    display: flex;
    flex-direction: row;
    color: #fff;
    padding-top: 60px;
    box-sizing: border-box;
    position: relative;
}
.pretty_main .pretty_top aside .wrap div{
    padding: 90px 74px 0px 58px;
    box-sizing: border-box;
}
.pretty_main .pretty_top aside .wrap div h5{
    font-size: 30px;
    margin-bottom: 38px;
    box-sizing: border-box;
    height: 35px;
    width: fit-content;
}
.pretty_main .pretty_top aside .wrap div p{
    font-size: 16px;
    line-height: 30px;
}
.pretty_main .pretty_top aside .wrap .red{
    bottom: 35px;
    margin-left: 60px;
}
.pretty_main .pretty_top aside .wrap article{
    position: relative;
}
.pretty_main .pretty_top aside .wrap article div{
    width: 330px;
    height: 330px;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    background: rgba(0, 0, 0,0.5);
}
.pretty_main .pretty_top aside .wrap article div:hover{
    background: rgba(0, 0, 0,0);
}
.pretty_main .pretty_top aside .wrap article div span{
    display: block;
    position: absolute;
    right: -25px;
    top: 150px;
    background-color: #000;
    width: 40px;
    height: 40px;
    z-index: 2;
    transform: rotate(45deg);
}
.botBorder:hover{
    border-bottom: 2px solid #fff;
}

/* 第二层 */

.pretty_main .pretty_cent{
    height: 330px;
    display: flex;
    position: relative;
}
.pretty_main .pretty_cent div{
    flex: 0.25;
}
.pretty_main .pretty_cent div:nth-of-type(2n-1){
    background: #000;
    display: flex;
}
.pretty_main .pretty_cent div:nth-of-type(2n-1) h5{
    font-size: 30px;
    color: #fff;
    margin: auto;
    width: fit-content;
    box-sizing: border-box;
    line-height: 28px;
}
.pretty_main .pretty_cent div:nth-of-type(2n){
    position: relative;
}
.pretty_main .pretty_cent div:nth-of-type(2n) span{
    display: block;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
}
.pretty_main .pretty_cent div:nth-of-type(2n):hover span{
    background: rgba(0,0,0,0);
}
.pretty_main .pretty_bot{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.pretty_main .pretty_bot aside{
    width: 662px;
    height: 440px;
    background: #000;
    
}
.pretty_main .pretty_bot img{
    width: 662px;
    height: 440px;
    
}

.pretty_main .pretty_bot aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pretty_main .pretty_bot aside div:first-of-type{
    padding: 0px 80px 0px 70px;
    position: relative;
}
.pretty_main .pretty_bot aside div:first-of-type .red img{
    width: 18px;
    height: 16px;
}
.pretty_main .pretty_bot aside div:first-of-type .red {
    left: 95px;
    top: 155px;
}
.pretty_main .pretty_bot aside div:first-of-type p{
    color: #fff;
    font-size: 16px;
    line-height: 35px;
}
.pretty_main .pretty_bot aside div:first-of-type h5{
    font-size: 30px;
    margin-bottom: 38px;
    box-sizing: border-box;
    height: 35px;
    width: fit-content;
    color: #fff;
}
.pretty_main .pretty_bot aside div:last-of-type{
    height: 48px;
    background: #fff;
    display: flex;
   flex-direction: row;
   align-items: center;
}
.pretty_main .pretty_bot aside div:last-of-type p:first-of-type{
    display: flex;
    align-items: center;
    padding-right: 24px;
    border-right: 1px solid #000;
    margin-right: 24px;
    
}

.pretty_main .pretty_bot aside div:last-of-type p:first-of-type img{
    width: 12px;
    height: 12px;
    padding: 0 10px;
}

.pretty_main .pretty_bot div:last-of-type{
    position: relative;
}
.pretty_main .pretty_bot div:last-of-type span{
    display: block;
    position: absolute;
    top: 0;left: 0;
    bottom: 0;right: 0;
    margin: auto;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
}
.pretty_main .pretty_bot div:last-of-type:hover span{
    background: rgba(0,0,0,0);
}
.pretty_main .pretty_bot aside div:last-of-type p:last-of-type{
    word-spacing: 24px;
}

/* pretty_main  shop*/
 .shop{
    margin-top: 200px;
}
 .shop h4{
    color: #000;
}
.shop .main {
    display: flex;
    flex-direction: row;
    justify-content:center ;

}
.shop .main .box1{
   flex: 0.3333;
   box-sizing: border-box;
   text-align: center;
   border: 1px solid #666666;
   position: relative;
   margin-bottom: 160px;
}
.shop .main .box1:hover{
    position: relative;
    z-index: 2;
    transform: scale(1.2);
    
}
.shop .main .box1:hover .tit1{
    background: url(../images/c-1bg.png) no-repeat center center;
    color: #fff;
}
.shop .main .box1:hover .tit1 h6 .pic_19{
    background-position: -72px -0px;
}
.shop .main .box1:nth-child(2){
    border-left: none;
    border-right: none;
}
.shop .main .box1:nth-child(2):hover{
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}
.shop .main .box1 .tit1{
    height: 160px;
    background: #f8f8f8;
}
.shop .main .box1 .tit1 h6{
    height: 103px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}
.shop .main .box1 .tit1 h6 .pic_19{
    display: inline-block;
    width: 72px;
    height: 72px;
    background: url(../images/CSS\ Satyr.png);
    margin-right: 20px;
}
.shop .main .box1 .tit1  p{
    font-size: 12px;
}
.shop .main .box1 ul{
    padding: 28px 50px 50px 32px;
    box-sizing: border-box;
    background: #fff;
}
.shop .main .box1 ul li{
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    
}
.shop .main .box1 ul li span{
  color: #666666;
}

.shop .main .box1 .red{
    opacity: 0;
}
.shop .main .box1:hover .red{
    opacity: 1;
}